<template>
  <div class="background">
    <Header>111</Header>
    <div class="all">
      <el-row :gutter="20">
        <el-col :span="5">
          <div class="grid-content">
            <Left></Left>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="grid-content">
            <Blog v-for="(blog,index) in blogs" :blog='blog' :key="index"></Blog>
            <div class="paging">
              <el-pagination
                background
                layout="prev, pager, next"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="total"
                @current-change=pageQuery>
              </el-pagination>
            </div>
            <!--<div class="block">
              <el-timeline class="timeline">
                <el-timeline-item v-for="blog in blogs" :timestamp="blog.lastUpdateDate" placement="top">
                  <el-card>
                    &lt;!&ndash;<div slot="header" class="clearfix">
                    </div>&ndash;&gt;
                    <h3 align="center">{{blog.blogTitle}}</h3>
                    &lt;!&ndash;<hr>&ndash;&gt;
                    <h5>博客简介:</h5>
                      <p v-html="blog.blogRemark" style="border: 1px solid #8c939d;padding: 10px">{{ blog.blogContent }}</p>
                    <p style="right: 10px;position: absolute;bottom: -2px;"> {{blog.author}} 提交于 {{blog.lastUpdateDate}}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>-->
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content">
            <el-card class="box-card">
              <div>
                <el-button type="success">
                  <router-link :to="{path: '/'}" style="text-decoration:none;">
                    返回首页
                  </router-link>
                </el-button>
              </div>
            </el-card>
            <!--<Right :typeList='typeList'></Right>-->
          </div>
        </el-col>
      </el-row>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Left from '../home/Left'
import Right from '../home/Right'
import Header from '../common/Header'
import Footer from '../common/Footer'
import Blog from '../common/Blog'
// eslint-disable-next-line no-unused-vars
import background from '../../assets/css/background.css'
// import Home from "../home/Home";
export default {
  name: 'Blogs',
  // eslint-disable-next-line vue/no-unused-components
  components: {
    Left,
    // eslint-disable-next-line vue/no-unused-components
    Right,
    Header,
    Footer,
    Blog
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo
    }
  },
  data () {
    return {
      blogs: {},
      typeList: {},
      currentPage: 1,
      total: 0,
      pageSize: 5,
      test: 666
    }
  },
  methods: {
    pageQuery (currentPage) {
      const _this = this
      this.$axios
        .get('/typeBlogs/' + currentPage + '/' + this.pageSize + '/' + this.$route.params.typeName)
        .then((res) => {
          _this.blogs = res.data.data.blog
          _this.total = res.data.data.totalSize
          _this.pageSize = res.data.data.size
          _this.currentPage = res.data.data.currentPage
        })
    },
    typeQuery () {
      const _this = this
      this.$axios
        .get('/types')
        .then((res) => {
          _this.typeList = res.data.data
        })
    }
  },
  mounted () {
    this.pageQuery(1)
    this.typeQuery()
  },
  created () {
  }
}
</script>
<style>
  .el-row {
    margin-bottom: 20px;
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    margin: 0 10px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .all {
    margin: 10px 5px;
  }

  .paging {
    margin: 5px auto;
    text-align: center;
  }
</style>
